<template>
	<div class="distributionSystem">
		<el-carousel :autoplay="false" arrow="always">
			<el-carousel-item v-for="(item,i) in carouselList" :key="i">
				<div class="card-container">
					<Card :class="['card-item', card.class]" v-for="(card, index) in item.arr" :key="index">
						<div slot="header">{{ card.label }}</div>
						<div slot="content">
							<component :is="componentIdent(card.type)"></component>
						</div>
					</Card>
				</div>
			</el-carousel-item>
		</el-carousel>
	</div>
</template>
<script>
import Card from './Card.vue';
import ChartType1 from './chartType1.vue';
import ChartType2 from './chartType2.vue';
export default {
	name: 'distributionSystem',
	components: { Card,ChartType1,ChartType2 },
	data() {
		return {
			carouselList: [
				{
					arr: [
						{ label: '直流母排1', type: 1, class: 'A1',status:'1' },
						{ label: '直流母排2', type: 1, class: 'A2' },
						{ label: '逆变器1', type: 2, class: 'B1' },
						{ label: '逆变器2', type: 2, class: 'B2' }
					]
				},
				{
					arr: [
						{ label: '直流母排1', type: 1, class: 'A1',status:'1' },
						{ label: '直流母排2', type: 1, class: 'A2' },
						{ label: '逆变器1', type: 2, class: 'B1' },
						{ label: '逆变器2', type: 2, class: 'B2' }
					]
				},
			]
		};
	},
	methods: {
		componentIdent(type) {
		    switch (type) {
		        case 1:
		            return 'ChartType1';
		        case 2:
		            return 'ChartType2';
		        
		    }
		}
	}
};
</script>
<style lang="scss" scoped>
.distributionSystem {
	width: 100%;
	height: 100%;
	.el-carousel {
		width: 100%;
		height: 100%;
		.card-container {
			width: 100%;
			height: 100%;
			display: grid;
			gap: 12px;
			justify-content: center;
			grid-template-columns: repeat(3, 204px);
			grid-template-rows: repeat(2, 166px);
			grid-template-areas:
				'A1 B1 B2'
				'A2 B1 B2';
			.A1 {
				grid-area: A1;
			}
			.A2 {
				grid-area: A2;
			}
			.B1 {
				grid-area: B1;
			}
			.B2 {
				grid-area: B2;
			}
			.card-item {
				width: 204px;
				// width: 100%;
				:deep(.Card-content){
					height: calc(100% - 36px);
					padding: 0;
					&>div{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
}

::v-deep .el-carousel__container {
	width: 700px;
	margin: 0 auto;
}
::v-deep .el-carousel__container {
	width: 100%;
	height: 100%;
}
::v-deep .el-carousel__indicators {
	display: none;
}
:deep(.el-carousel__arrow--left) {
	left: 31px;
	background-color: #fff !important;

	i {
		color: #4981e6;
		font-size: 18px;
	}
}
:deep(.el-carousel__arrow--right) {
	background-color: #fff !important;
	right: 31px;
	i {
		color: #4981e6;
		font-size: 18px;
	}
}
</style>
